<template>
    <div class="container">
        <!-- 轮播修改 -->
        <div v-show="item.type == 'wheel'">
            <div class="mobile-wheel-head">{{i18n('portalMobile.uploadRrotation','上传轮播图片')}}</div>
            <div class="mobile-wheel-common" v-for="(subItem, index) in item.items" :key="index">
                <my-icon type="iconoffline_fill" class="upicon-delet" @click="delSubItem(index)"></my-icon>
                <div class="upload-dragger">
                    <a-upload-dragger
                        :directory="false"
                        :showUploadList="false"
                        action="/api/api-system/system/core/sysFile/upload"
                        :headers="headers"
                        :beforeUpload="beforeUpload(subItem)"
                        @change="handleChange"
                    >
                        <img v-if="subItem.fileId" :src="imageUrl(subItem.fileId)" class="avatar" />
                        <div v-else>
                            <p>
                                <i class="iconfont iconicon_update upicon"></i>
                                <span class="upicon-text">{{i18n('portalMobile.uploadPictures','上传图片')}}</span>
                            </p>
                            <p  class="ant-upload-hint">
                                <span class="up-title">{{i18n('portalMobile.pictureSize','图片尺寸')}}</span>
                            </p>
                        </div>
                    </a-upload-dragger>

                </div>
                <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item style="margin-bottom: 0px" :label="i18n('portalMobile.jumpOrNot','是否跳转')">
                        <a-radio-group v-model="subItem.skip">
                            <a-radio value="yes">{{i18n('portalMobile.jump','跳转')}}</a-radio>
                            <a-radio value="no">{{i18n('portalMobile.noJump','不跳转')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="URL" v-if="subItem.skip=='yes'">
                        <a-input v-model="subItem.url" :placeholder="i18n('portalMobile.url','URL','input')"></a-input>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <a-button class="upicon-button" @click="wheelAddItem">{{i18n('portalMobile.addItem','添加图片')}}</a-button>
        </div>
        <!-- 栏目编辑 -->
        <div v-show="item.type == 'grid' || item.type=='process' || item.type=='largeScreen'">
            <div class="mobile-column">{{i18n('portalMobile.editColumn','栏目编辑')}}</div>
            <div class="mobile-column-head">
                <a-input v-model="item.title" @change="updateI18nName(item,'title')"  style="width: 280px;"
                         :placeholder="i18n('portalMobile.moduleTitle','请输入网格模块大标题')">
                    <my-icon slot="addonAfter" type="iconearth-full" @click="editI18nName(item,'title')"/>
                </a-input>
                <div class="mobile-column-head-checkbox"><a-checkbox v-model="item.titleflg">{{i18n('portalMobile.showTitle','显示标题')}}</a-checkbox></div>
            </div>
            <a-form-model>
                <a-form-model-item :label="i18n('portalMobile.columnStyle','栏目风格')">
                    <a-radio-group v-model="item.stylize">
                        <a-radio value="img">
                            {{i18n('portalMobile.img','图片')}}
                        </a-radio>
                        <a-radio value="iconfont">
                            {{i18n('portalMobile.icon','图标')}}
                        </a-radio>
                        <a-radio value="card">卡片</a-radio>
                    </a-radio-group>
                    <a-button @click="acquiesce(item.type)" size="small" v-if="item.type=='process' || item.type=='largeScreen'">{{i18n('portalMobile.default','默认')}}</a-button>
                </a-form-model-item>
                <a-form-model-item :label="i18n('portalMobile.columnPermission','栏目权限')">
                    <div  class="mobile-column-collapse-vuedraggable-right" @click.stop="addColumnPermission(item)">
                        <my-icon type="iconsetup"></my-icon>
                        <span>{{i18n('portalMobile.dispose','配置')}}</span>
                        <a-tag :title="i18n('portalMobile.configured','已配置')" color="green" v-if="item.permissions" style="margin-left: 8px;width: 73px;text-align: center">{{i18n('portalMobile.configured','已配置')}}</a-tag>
                        <a-tag :title="i18n('portalMobile.notConfigured','未配置')" color="red" v-else  style="margin-left: 8px;width: 73px;text-align: center;overflow: hidden;padding: 0px 5px;">{{i18n('portalMobile.notConfigured','未配置')}}</a-tag>
                    </div>
                </a-form-model-item>
            </a-form-model>

            <div class="mobile-column-collapse">
                <a-collapse default-active-key="1" :bordered="false">
                    <a-collapse-panel key="1" :header="i18n('portalMobile.columnContent','栏目内容')">
                        <vuedraggable class="wrapper" v-model="item.items">
                            <transition-group>
                                <div v-for="(subItem, index) in item.items" :key="index" class="mobile-column-collapse-vuedraggable">
                                    <div class="mobile-column-collapse-vuedraggable-left">
                                        <my-icon type="icondrag"></my-icon>
                                        <my-icon type="iconoffline" @click="delSubItem(index)"></my-icon>
                                        <div v-if="item.stylize=='img'">
                                            <img v-if="subItem.imgId" class="mobile-column-collapse-vuedraggable-left-img" :src="getFilePath(subItem.imgId)" alt="photo"></img>
                                            <img v-else class="mobile-column-collapse-vuedraggable-left-img" src="../../../../image/mobile.png"></img>
                                        </div>
                                        <div v-else :style="{'background':subItem.bgColor}" class="mobile-column-collapse-vuedraggable-left-iconfont">
                                            <my-icon   :type="subItem.icon" ></my-icon>
                                        </div>
                                        <span class="mobile-column-collapse-vuedraggable-left-title">{{getSubItemTitleVal(subItem)}}</span>
                                    </div>
                                    <div  class="mobile-column-collapse-vuedraggable-right" @click="configuration(subItem,index)">
                                        <my-icon type="iconsetup"></my-icon>
                                        <span>{{i18n('portalMobile.dispose','配置')}}</span>
                                        <a-tag :title="i18n('portalMobile.configured','已配置')" color="green" v-if="subItem.title" style="margin-left: 8px;width: 73px;text-align: center">{{i18n('portalMobile.configured','已配置')}}</a-tag>
                                        <a-tag :title="i18n('portalMobile.notConfigured','未配置')" color="red" v-else  style="margin-left: 8px;width: 73px;text-align: center;overflow: hidden;padding: 0px 5px;">{{i18n('portalMobile.notConfigured','未配置')}}</a-tag>
                                    </div>
                                </div>
                            </transition-group>
                        </vuedraggable>
                    </a-collapse-panel>
                </a-collapse>
                <div class="mobile-column-collapse-add" v-if="item.type!='process'" @click="gridAddItem">
                    <my-icon type="iconxinzeng" ></my-icon><span>{{i18n('portalMobile.newColumn','新增栏目')}}</span>
                </div>
            </div>
        </div>
        <div v-show="item.type == 'notice'">
            <div class="r_title">{{i18n('portalMobile.noticeSettings','公告设置')}}</div>
            <div class="notice-list">
                <a-input-number v-model.number="item.noticeNum"></a-input-number>&nbsp;
                <span>{{i18n('portalMobile.twig','条')}}</span>
            </div>
        </div>
        <!-- tab设置 -->
        <div v-show="item.type == 'tab'">
            <div class="mobile-column">{{i18n('portalMobile.tabColumnEditor','tab栏目编辑')}}</div>
            <div class="mobile-column-head">
                <a-input v-model="item.title" @change="updateI18nName(item,'title')"  style="width: 280px;"
                         :placeholder="i18n('portalMobile.moduleTitle','请输入网格模块大标题')">
                    <my-icon slot="addonAfter" type="iconearth-full" @click="editI18nName(item,'title')"/>
                </a-input>
                <div class="mobile-column-head-checkbox"><a-checkbox v-model="item.titleflg">{{i18n('portalMobile.showTitle','显示标题')}}</a-checkbox></div>
            </div>
            <a-button class="add-label" @click="tabAddItem" type="primary" ghost>{{i18n('portalMobile.addTag','添加标签')}}</a-button>
            <div class="tab-sun-collapse">
                <a-collapse default-active-key="0" v-for="(teblist,index) in item.tabs" class="bpm-sun-collapse">
                    <a-collapse-panel :key="index">
                        <div slot="header" class="bpm-sun-collapse-header">
                            <div>{{i18n('portalMobile.tagName','标签名:')}}</div>
                            <a-input v-model="teblist.title" @change="updateI18nName(teblist,'title')"  style="width: 176px;margin-right: 5px;"
                                     :placeholder="i18n('portalMobile.tabName','tab名称')">
                                <my-icon slot="addonAfter" type="iconearth-full" @click="editI18nName(teblist,'title')"/>
                            </a-input>
                            <div class="bpm-sun-collapse-header-operator">
                                <my-icon @click="tabdelete(index)"  type="iconshanchu"></my-icon>
                                <my-icon @click="tabup(index)" type="iconshangjiantou-01"></my-icon>
                                <my-icon @click="tabdown(index)"  type="iconxiajiantou"></my-icon>
<!--                                <my-icon @click="addTabPermission(item,index)" type="iconsetup"></my-icon>-->
                            </div>
                        </div>
                        <div class="gridsettings" style="padding: 0px 16px">
                            <a-form-model>
                                <a-form-model-item :label="i18n('portalMobile.columnStyle','栏目风格')" style="margin-bottom: 0px">
                                    <a-radio-group v-model="teblist.stylize">
                                        <a-radio value="img">
                                            {{i18n('portalMobile.img','图片')}}
                                        </a-radio>
                                        <a-radio value="iconfont">
                                            {{i18n('portalMobile.icon','图标')}}
                                        </a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                                <a-form-model-item :label="i18n('portalMobile.columnPermission','栏目权限')">
                                    <div  class="mobile-column-collapse-vuedraggable-right" @click.stop="addTabPermission(item,index)">
                                        <my-icon type="iconsetup"></my-icon>
                                        <span>{{i18n('portalMobile.dispose','配置')}}</span>
                                        <a-tag :title="i18n('portalMobile.configured','已配置')" color="green" v-if="item.tabs[index].permissions" style="margin-left: 8px;width: 73px;text-align: center">{{i18n('portalMobile.configured','已配置')}}</a-tag>
                                        <a-tag :title="i18n('portalMobile.notConfigured','未配置')" color="red" v-else  style="margin-left: 8px;width: 73px;text-align: center;overflow: hidden;padding: 0px 5px;">{{i18n('portalMobile.notConfigured','未配置')}}</a-tag>
                                    </div>
                                </a-form-model-item>
                            </a-form-model>
                            <div class="mobile-column-collapse">
                                <a-collapse default-active-key="1" :bordered="false">
                                    <a-collapse-panel key="1" :header="i18n('portalMobile.columnContent','栏目内容')">
                                        <vuedraggable class="wrapper" v-model="teblist.items">
                                            <transition-group>
                                                <div v-for="(subItem, index1) in teblist.items" :key="index1" class="mobile-column-collapse-vuedraggable">
                                                    <div class="mobile-column-collapse-vuedraggable-left">
                                                        <my-icon type="icondrag"></my-icon>
                                                        <my-icon type="iconoffline" @click="tabdelSubItem(index,index1)"></my-icon>
                                                        <div v-if="teblist.stylize=='img'">
                                                            <img v-if="subItem.imgId" class="mobile-column-collapse-vuedraggable-left-img" :src="getFilePath(subItem.imgId)" alt="photo"></img>
                                                            <img v-else class="mobile-column-collapse-vuedraggable-left-img" src="../../../../image/mobile.png"></img>
                                                        </div>
                                                        <div v-else :style="{'background':subItem.bgColor}" class="mobile-column-collapse-vuedraggable-left-iconfont">
                                                            <my-icon   :type="subItem.icon" ></my-icon>
                                                        </div>
                                                        <span class="mobile-column-collapse-vuedraggable-left-title">{{getSubItemTitleVal(subItem)}}</span>
                                                    </div>
                                                    <div  class="mobile-column-collapse-vuedraggable-right" @click="configuration(subItem,index,index1)"> <my-icon type="iconsetup"></my-icon> </div>
                                                </div>
                                            </transition-group>
                                        </vuedraggable>
                                    </a-collapse-panel>
                                </a-collapse>
                                <div class="mobile-column-collapse-add" @click="tabson(index)">

                                    <my-icon style="font-size: 18px" type="iconxinzeng"></my-icon><span>{{i18n('portalMobile.newColumn','新增栏目')}}</span>
                                </div>
                            </div>
                        </div>
                    </a-collapse-panel>
                </a-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import entry from './entry.js'
import { Util, Dialog,App,TokenUtil } from "@lowcode/jpaas-common-lib"
import vuedraggable from 'rx-vuedraggable';
import InsPortaMobileIconfont from './InsPortaMobileIconfont'
import InsPortaMobileColumnPermission from './InsPortaMobileColumnPermission'
import FormApi from "@/views/modules/form/core/js-comps/api/FormApi";


export default {
    mixins:[App],
    components: {
        vuedraggable,
    },
    data() {
        return {
            i18nDefault:process.env.VUE_APP_LANGUAGE,
            i18nCurrent:"",
            isInitI18n:false,
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
            icindex: '',
            imglist: [
                {
                    imgsrc: '../../static/lunbo/lunbo1.jpg',
                },
                {
                    imgsrc: '../../static/lunbo/lunbo2.jpg',
                },
            ],
            enditor: '',
            value: true,
            item: {},
            headers: {},
            options: [
                {
                    label: this.i18n('portalMobile.StartForm','流程方案'),
                    value: 'StartForm',
                },
                {
                    label: this.i18n('portalMobile.CustomForm','表单方案'),
                    value: 'CustomForm',
                },
                {
                    label: this.i18n('portalMobile.CustomList','单据列表'),
                    value: 'CustomList',
                },
                {
                    label: this.i18n('portalMobile.rxUreport','ureport报表'),
                    value: 'rxUreport',
                },
                {
                    label: this.i18n('portalMobile.process','流程办理'),
                    value: 'process',
                },
                {
                    label: this.i18n('portalMobile.custom','自定义'),
                    value: 'custom',
                },{
                    label: 'URL',
                    value: 'IFrame'
                },
            ],
            subItem: {},
            showFileList: false,
            application: {label: this.$ti18('rxForm.appId','应用'), value: 'appPortal'},
            appId: "",
        }
    },
    mounted() {
        this.initHeader();
        this.appId = this.curApp.appId;
        if(!this.appId){
            this.options.push(this.application);
        }
        this.getCurrentI18n();
    },
    methods: {
        i18n(name,text,key){
          return this.$ti18(name,text,"insPortalDef",key);
        },
        loadInitTitleVal(){
            this.isInitI18n=true;
            this.loadInitTabsTitleVal();
            if(!this.item.i18nJson){
                this.isInitI18n=false;
                return;
            }
            let i18nJson =JSON.parse(this.item.i18nJson);
            let val=i18nJson[this.i18nCurrent];
            if(!val){
                this.isInitI18n=false;
                return;
            }
            this.item.title=val;
            this.isInitI18n=false;
        },
        loadInitTabsTitleVal(){
            if("tab"!=this.item.type){
                return;
            }
            for(let i=0;i<this.item.tabs.length;i++){
                let tab= this.item.tabs[i];
                if(!tab.i18nJson){
                    continue;
                }
                let i18nJson =JSON.parse(tab.i18nJson);
                let val=i18nJson[this.i18nCurrent];
                if(!val){
                    continue;
                }
                tab.title=val;
            }
        },
        getCurrentI18n(){
            this.i18nCurrent= window.localStorage.getItem("language");
            if(!this.i18nCurrent){
                this.i18nCurrent=this.i18nDefault;
            }

        },
        updateI18nName(record,text) {
            let i18nJson=this.getI18nJson(record,text);
            record[text] = i18nJson[this.i18nCurrent];
            record.i18nJson=JSON.stringify(i18nJson);
        },
        getI18nJson(row,text){
            let i18nJson={};
            let i18nConf =row.i18nJson;
            if(i18nConf){
                i18nJson=JSON.parse(i18nConf);
                let val=i18nJson[this.i18nCurrent];
                if(!val || !this.isInitI18n){
                    i18nJson[this.i18nCurrent]=row[text];
                }
            }else {
                i18nJson[this.i18nCurrent] = row[text];
                i18nJson[this.i18nDefault] = row[text];
            }
            return i18nJson;
        },
        editI18nName(record,text) {
            let self_ = this;
            let conifg = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    i18nJson: this.getI18nJson(record,text)
                }
            }
            Dialog.openI18nDialog(conifg, function (action, data) {
                record[text] = data[self_.i18nCurrent];
                record.i18nJson=JSON.stringify(data);
            });
        },
        getSubItemTitleVal(subItem){
            let title= this.$i18(subItem.i18nJson,subItem.title)||subItem.title;
            return title;
        },
        /**
         * 配置
         * @param subItem
         * @param index
         */
        configuration(subItem,index,index1){
                var conf = {
                    component: InsPortaMobileIconfont,
                    title: this.i18n('portalMobile.columnConfig','栏目配置'),
                };
                var self_ = this;
                if(self_.item.type=='grid'){
                 var stylize = this.item.stylize
                }else if(self_.item.type=='tab') {
                  var stylize = self_.item.tabs[index].stylize
                }else if(self_.item.type =='process'){
                    var stylize = this.item.stylize
                }
                var baseConf = {
                    "curVm": self_,
                    widthHeight: ['800px', '600px'],
                    "data": {
                        subItem:subItem,
                        index:index,
                        stylize:stylize,
                        type:this.item.type
                    },
                };
                let config = Object.assign(baseConf, conf);
                Util.open(config, function (action,data) {
                    if(action =='ok'){
                        if(self_.item.type=='grid'){
                            self_.item.items[index] = data
                        }else if(self_.item.type=='tab'){
                            self_.item.tabs[index].items[index1] = data
                        }else if(self_.item.type =='process'){
                            self_.item.items[index] = data
                        }else if(self_.item.type =='largeScreen'){
                            self_.item.items[index] = data
                        }
                        self_.$forceUpdate();
                        self_.$emit('freshen',self_.item)
                    }
                });
        },
        addColumnPermission(item){
            var conf = {
                component: InsPortaMobileColumnPermission,
                title: this.i18n('portalMobile.columnPermission','栏目权限'),
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    permissions:item.permissions?item.permissions:{},
                },
            };
            Util.open(conf, function (action,data) {
                 if(action =='ok'){
                     this.$set(item,'permissions',data)
                 }
            })
        },
        addTabPermission(item,index){
            let tab = item.tabs[index]
            var conf = {
                component: InsPortaMobileColumnPermission,
                title: this.i18n('portalMobile.columnPermission','栏目权限'),
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    permissions:tab.permissions?tab.permissions:{},
                },
            };
            Util.open(conf, function (action,data) {
                if(action =='ok'){
                    item.tabs[index].permissions=data;
                }
            })
        },
        beforeUploadImg(file) {
            let timestamp = new Date().getTime();
            let formdata = new FormData();
            formdata.append('files', file);
            formdata.append("time", Util.encryptWord(timestamp,true));
            let self = this;
            FormApi.upload(formdata).then(res => {
                self.$forceUpdate();
            })

        },
        getFilePath(fileId){
            let token = TokenUtil.getToken();
            fileId=Util.encryptWord(fileId);
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        },
        setIcon(icon) {
            this.iconPc = icon
            this.form.setFieldsValue({ iconPc: icon })
        },
        initHeader() {
            let token = TokenUtil.getToken()
            if (token) {
                this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
            }
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true
                return
            }
            if (info.file.status === 'done') {
                this.subItem.fileId = info.file.response.data[0].fileId
            }
        },
        beforeUpload(item) {
            this.subItem = item
        },
        itemEdit(obj) {
            this.item = obj;
            if(this.item && !this.item.stylize){
                this.$set(this.item,'stylize','iconfont')
            }
            this.loadInitTitleVal();
        },
        // 轮播添加
        imgadd() {
            this.imglist.push({
                imgsrc: '',
            })
        },
        // 轮播删除
        imgdel(index) {
            this.imglist.splice(index, 1)
        },
        imageUrl(fileId) {
            var accessToken = TokenUtil.getToken();
            return `/api/api-system/system/core/sysFile/downloadScale/${fileId}?accessToken=` + accessToken
        },
        gridAddItem() {
            var copyItem = JSON.parse(JSON.stringify(entry.gridEntry.items[0]))
            this.item.items.push(copyItem)
        },
        tabAddItem(){
            var copyItem = JSON.parse(JSON.stringify(entry.tabcolumn.tabs[0]))
            this.item.tabs.push(copyItem)
        },
        tabson(index){
            var copyItem = JSON.parse(JSON.stringify(entry.tabcolumn.tabs[0].items[0]))
            this.item.tabs[index].items.push(copyItem)
        },
        tabdelete(index){
            this.item.tabs.splice(index, 1)
        },
        wheelAddItem() {
            var copyItem = JSON.parse(JSON.stringify(entry.wheelEntry.items[0]))
            this.item.items.push(copyItem)
        },
        noticeAddItem() {
            var copyItem = JSON.parse(JSON.stringify(entry.noticeEntry.items[0]))
            this.item.items.push(copyItem)
        },
        getUploadUrl() {
            return '/api/api-system/system/core/sysFile/upload'
        },
        fatherMethod(icon) {
            this.$set(this.item.items[this.icindex], 'icon', icon)
        },
        tabdelSubItem(index,index1){
            this.item.tabs[index].items.splice(index1, 1);
        },
        delSubItem(index) {
            var self_ = this
            this.$confirm({
                title: this.i18n('msa.deleteInfo','确认删除该选项?'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex: 999999,
                onOk() {
                    self_.item.items.splice(index, 1)
                    self_.$destroyAll()
                },
                onCancel() {
                    console.log('Cancel');
                },

            })
        },
        tabup(index) {
            this.tabswitchItem(index - 1)
        },
        tabdown(index) {
            this.tabswitchItem(index)
        },
        tabswitchItem(index) {
            let arr = this.item.tabs.splice(index, 2)
            this.item.tabs.splice(index, 0, ...arr.reverse())
        },
        //恢复默认
        acquiesce(type){
            let name = '';
            if(type =='process'){
                name ='processEntry'
            }else if(type=='largeScreen'){
                name ='largeScreen'
            }
            //流程栏目恢复默认
            let item = JSON.parse(JSON.stringify(entry[name]));
            let processList = []
            this.item.items.filter(res=>{
                processList.push(res.routeName)
            })
            item.items.filter(res=>{
                if(processList.indexOf(res.routeName)<0){
                    this.item.items.push(res)
                }
            })
        }
    },
    watch: {
        item: {
            handler: function (val) {
                this.$forceUpdate()
            },
            deep: true,
        },
    },
}
</script>

<style lang="less" >
.add-label{
    margin: 16px auto;
    width: 100%;
    height: 34px;
}
.notice-list{
    display: flex;
    margin-top: 10px;
    line-height: 30px;
}
.notice-list input{
    flex: 1;
}
.tab-sun-collapse{
    .ant-collapse > .ant-collapse-item > .ant-collapse-header{
        padding: 0px!important;
    }
    .ant-collapse-content > .ant-collapse-content-box{
        padding: 0px!important;
    }
}
.bpm-sun-collapse{
    margin-bottom: 16px;
}
.bpm-sun-collapse-header-operator{
    font-size: 30px;
}
.bpm-sun-collapse-header-operator>i{
    margin-right: 5px;
}
.bpm-sun-collapse-header{
    display: flex;
    align-items: center;
    padding:10px 0px 10px 35px;
}
.bpm-sun-collapse-header>div:nth-child(1){
    color: #333333;
    margin-right: 5px;
}
.avatar{
    height: 94px;
    border-radius: 3px;
}
.upload-dragger{
    width: 314px;
    margin:16px auto;
    height: 114px;
    background-color: #f5f7fa;
    border-radius: 3px;
    .ant-upload-drag{
        border: none;
    }
}
.upicon-delet{
    position: absolute;
    top: -9px;
    right: -9px;
    font-size: 20px;
    color: #ff4949;
    z-index: 1;
}
.upicon-button{
    width: 368px;
    margin-top: 16px;
}
.upicon-text{
    text-align: center;
    color: #555555;
    font-size: 14px;
    display: block;
    height: 20px;
    line-height: 20px;
}
.upicon{
  color:#4285f4;
    font-size: 42px;
}
.mobile-wheel-common{
    width: 368px;
    background-color: #ffffff;
    border-radius: 3px;
    margin-top: 16px;
    padding: 20px;
    position: relative;
    border:1px dashed #d9d9d9;
}
.mobile-wheel-head{
    color: #333333;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #e8e8e8;
}
.mobile-column-collapse-vuedraggable-left-img{
    width: 25px;
    height: 25px;
    margin-right: 10px;
    object-fit:contain;
}
.container {
    padding: 10px;
    box-sizing: border-box;
    margin: 0px auto;
    overflow: hidden;
}
.mobile-column-collapse-add{
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #303030;
    cursor: pointer;
    margin-left: 26px;
    margin-top: 13px;
    margin-bottom: 16px;
    span{
        font-size: 14px;
        margin-left: 4px;
    }
}
.mobile-column-collapse-vuedraggable-right{
    display: flex;
    align-items: center;
    i{
        color: #303030;
        font-size: 20px;
        cursor: pointer;
        margin-right: 8px;
    }
}
.mobile-column-collapse-vuedraggable{
    display: flex;
    cursor: pointer;
    border-bottom: 1px dashed #dedede;
    height: 40px;
    line-height: 40px;
    .mobile-column-collapse-vuedraggable-left{
        flex: 1;
        display: flex;
        align-items: center;
        i{
            color: #303030;
            font-size: 15px;
            margin-right: 8px;
        }
        i:nth-child(2){
            font-size: 20px;
        }
    }
    .mobile-column-collapse-vuedraggable-left-iconfont{
        i{
            color: white;
            font-size: 20px;
            margin-right: 0px;
        }
        width: 30px;
        text-align: center;
        line-height: 30px;
        height: 30px;
        background-color: #30cca3;
        border-radius: 4px;
        margin-right: 9px;
    }
    .mobile-column-collapse-vuedraggable-left-title{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #303030;
        font-size: 14px;
        width: 120px;
        white-space: nowrap;
    }
}
.mobile-column-collapse{
    .ant-collapse-item{
        border: none!important;
    }
    .ant-collapse-item-active{
        background-color: white!important;
    }
    .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
        left: 0px!important;
    }
    .ant-collapse > .ant-collapse-item > .ant-collapse-header{
        padding:0px 0px 0px 25px!important;
    }
    .ant-collapse-content-box{
        padding: 0px;
    }
}
.mobile-column{
    font-size: 16px;
    color: #333;
    padding: 16px 0;
    border-bottom: 1px solid #e8e8e8;
}
.mobile-column-head{
    width: 100%;
    height: 70px;
    border-bottom: 1px dashed #e8e8e8;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 15px;
    input{
        width: 275px;
    }
    .mobile-column-head-checkbox{
        margin-left: 10px;
    }
}
.mobile-jurisdiction{
    margin-right: 10px;
}
.mobile-jurisdiction:hover{
    color: #0e62e8;
}

</style>
